<template>
  <!--公告列表-->
  <div class="content-area">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item"><span>公告标题:</span>
          <el-input placeholder="标题关键词" v-model="searchData.title" clearable></el-input>
        </div>
        <!--<button class="search-btn" @click="delRecords">批量删除</button>-->
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="lookupByConditions">查询</button>
      </div>
    </div>
    <!--内容-->
    <div class="main-content">
      <div class="content-info" style="width: 100%">
        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo" default-sort="{order: descending}" v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <button class="some-btn some-btn-release" v-if="pagePowerNoticePush"
                      @click="$goRoute( '/manage/noticeMgr/noticePush?type=add')">发布公告
              </button>
            </div>
          </div>

          <!-- 额外的操作以及其他因素 -->
          <el-table-column fixed="left" align="center" label="序号" width="60">
            <template slot-scope="scope">
              <div class="item-names">{{scope.row.index}}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="left" align="center" label="编码" width="160">
            <template slot-scope="scope">
              <div class="item-names">{{scope.row.code}}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="left" align="center" label="标题" width="320">
            <template slot-scope="scope">
              <template v-if="scope.row.titlePop">
                <el-popover ref="popover" placement="top" width="370" popper-class="el_pop standardPopo" trigger="hover"
                            :content="scope.row.titleTrue"></el-popover>
                <div v-popover:popover>
                  <div class="item-names over-pop">{{scope.row.title}}</div>
                </div>
              </template>
              <template v-else>
                <div class="item-names">{{scope.row.title}}</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="封面图片" align="center" mix-width="80">
            <template slot-scope="scope">
              <div class="img-position">
                <el-popover ref="popover1" placement="top-end" width="80" popper-class="el_pop" trigger="hover">
                  <img :src="scope.row.image" class="big-img">
                </el-popover>

                <el-button type="text" v-popover:popover1>
                  <div class="min-img-position">
                    <img :src="scope.row.image" class="min-img"/>
                  </div>
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="推荐" width="80" v-if="pagePower['006001002']">
            <template slot-scope="scope">
              <el-switch active-color="#67c23a" inactive-color="#ACBCC9" v-model="scope.row.isTop"
                         @change="topChange(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="160"
                           v-if="pagePower['006001002'] || pagePower['006001003']">
            <template slot-scope="scope">
              <div class="item-route">
                <!--<div class="item-route-link" @click="noticeDetail(scope.row.id);">查看</div>-->
                <div class="item-route-link" v-if="pagePower['006001001']" @click="noticeEdit(scope.row.id);">编辑</div>
                <div class="item-route-link" v-if="pagePower['006001002']" @click="delNotice(scope.row.id)">删除</div>
              </div>
            </template>
          </el-table-column>
        </DataTable>
      </div>
    </div>
  </div>
</template>
<script>
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import com from "../../../js/common"
  import HeadTop from "../../../components/head-top/head-top"
  import {getNoticeList, noticeEdit, noticeDel} from '@/api/getData'

  export default {
    name: 'noticeList',
    components: {
      DataTable,
      HeadTop
    },
    data() {
      return {
        orderObj: {prop: 'index',order: 'descending'},
        parentLoad: '加载中...',    // 加载状态
        pagePower: JSON.parse(com.getStore('pagePowers'))['006001'] ? JSON.parse(com.getStore('pagePowers'))['006001'] : {},
        pagePowerNoticePush: JSON.parse(com.getStore('pagePowers'))['006002'] ? JSON.parse(com.getStore('pagePowers'))['006002'] : false,
        //子页面信息
        childLink: [
          {
            route: '/manage/noticeMgr/noticePush?type=detail',
            text: '查看',
          },
          {
            route: '/manage/noticeMgr/noticeEdit?type=edit',
            text: '编辑',
          }
        ],
        searchData: {
          title: '',
        },
        topNum: 0,

        // 表格组件数据
        dataTableObj: {
          multipleSelection: [],
          // 表格数据
          tableData: [],
          // 表格标题
          tableColumns: [
            {
              text: '分类',
              width: '100',
              attributeName: 'typeName'
            },
            {
              text: '发布者',
              width: '100',
              attributeName: 'authorName'
            },
            {
              text: '发布时间',
              width: '100',
              attributeName: 'createTime'
            },
            {
              text: '相关',
              width: '100',
              attributeName: 'readNumText'
            },
          ],
          // 翻页的数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            pageNo: 1,
            searchStatus: 2
          },
          checkIds: [],
        },
      }
    },
    mounted() {
      // 获取当前页面所需数据
      this.getNoticeListData()
    },
    methods: {
      // 获取页面所需数据
      getNoticeListData() {
        this.dataTableObj.pageObj.searchStatus = 2
        this.dataTableObj.tableData = []
        getNoticeList({
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
          condition: this.searchData,
        }).then((data) => {
          this.dataTableObj.pageObj.searchStatus = 1
          let startPage = (this.dataTableObj.pageObj.pageNo - 1) * this.dataTableObj.pageObj.pageSize;
          let info = data.data.data.data;
          if (info.length > 0) {
            let topNumber = 0;
            const typeNameObj = {1: '全部', 2: '巡检专题', 3: '维保专题', 4: '物业专题'};
            info.forEach((i, t) => {
              i.index = startPage + t + 1;
              i.readNumText = '阅读 : ' + i.readNum;
              i.isTop = i.areTop === '0';
              i.createTime = i.createTime ? com.formatDate(i.createTime).substring(0, 10) : i.createTime;
              i.typeName = typeNameObj[i.type]
              if (i.title.length > 20) {
                i.titlePop = true;
                i.titleTrue = i.title;
                i.title = i.title.substr(0, 20) + '...';
              }
              if (i.areTop === '0') topNumber += 1
            })
            this.topNum = topNumber;
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.tableData = info;
          this.dataTableObj.pageObj.pageNum = data.data.data.totalRecord;
        }).catch((data) => {
          this.parentLoad = data.data.message    // loading(查询失败)
          this.dataTableObj.pageObj.searchStatus = 0
        })
      },
      // 查询条件
      lookupByConditions: function () {
        // 跳出查询等待框
        this.getNoticeListData();
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getNoticeListData()
      },

      // 切换第几页
      searchByPageNo(val) {
        this.dataTableObj.pageObj.pageNo = val;
        this.getNoticeListData()
      },

      // 改变状态是否禁用状态
      topChange(row) {
        let infolList = this.dataTableObj.tableData;
        const istop = !row.isTop;
        noticeEdit({
          id: row.id,
          areTop: row.areTop === '1' ? 0 : 1,
          type: row.type
        }).then((res) => {
          this.topListChange(row.id, !istop, row.areTop == '1' ? 0 : 1)
          this.topNum = this.topNum + (row.areTop === '1' ? -1 : 1);
          this.$message.success({
            message: '操作成功',
            duration: 1500,
          })
        }).catch((err) => {
          if (err.data.code === '501') {
            row.isTop = istop;
            this.$message.error('操作失败: ' + '当前暂无推荐位，请在公告列表编辑后再推荐')
          } else {
            row.isTop = istop;
            this.$message.error('操作失败: ' + err.data.data)
          }
        })
      },

      // 置顶状态改变引起的列表展示变动
      topListChange(resId, resIsTop, resAreTop) {
        let infolList = this.dataTableObj.tableData;
        infolList.forEach(function (e, i) {
          if (e.id == resId) {
            e.isTop = resIsTop;
            e.areTop = resAreTop;
          }
        });
        this.dataTableObj.tableData = infolList;
      },

      // 编辑
      noticeEdit(resid) {
        this.$router.push({path: '/manage/noticeMgr/noticeEdit?id=' + resid + '&type=edit&topNum=' + this.topNum});
      },

      // 删除
      delNotice(res) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          noticeDel({id: res}).then((res) => {
            this.getNoticeListData()
          }).catch((err) => {
            this.$message.error('操作失败');
          })
        }).catch(_ => {});
      },

      // 页面刷新
      pageReload(){
        this.getNoticeListData();
      }
    },
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";
</style>
